<template>
  <div class="main" style="margin: 10px">
    <el-card>
      <div>
        <!--工具栏-->
        <div class="head-container">
          <div>
            <!-- 搜索 -->
            <span>
              <el-input v-model="typeKey" clearable placeholder="类型" style="width: 200px" class="filter-item"/>
              <el-select v-model="systemKey" placeholder="字典类型" style="width: 200px;margin:0 15px" class="filter-item">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <span class="filter-item">
                <el-button type="success" icon="el-icon-search" @click="searchFilter" >搜索</el-button>
                <el-button type="warning" icon="el-icon-refresh-left">重置</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
              </span>
            </span>
          </div>
        </div>
      </div>
      <el-card style="margin-top: 10px">
        <el-table border
          ref="table"
          :data="tableData"
          style="width: 100%"
          row-key="id"
          lazy
          >>
          <el-table-column type="index" label="序号" width="55">
          </el-table-column>
          <el-table-column prop="type" label="类型"> </el-table-column>
          <el-table-column
            prop="remarks"
            label="描述"
            align="center"
          ></el-table-column>
          <el-table-column prop="system" label="字典类型" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.system == 1">系统类</el-tag>
              <el-tag v-if="scope.row.system == 2">业务类</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="备注信息" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建日期" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatDateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
              <el-button type="primary" size="mini" @click="handleView(scope.row)">字典项</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
    <!-- 分页 -->
    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList"/>
    <DialogDict :dialogDict="dialogDict" :formData="formData" @handleSubmit="handleSubmit" @handleSubmitEdit="handleSubmitEdit"></DialogDict>
    <DialogDictItemIndex :dialogDictItemIndex='dialogDictItemIndex' :dictIdData='dictIdData'></DialogDictItemIndex>
  </div>
</template>

<script>
import { getDictPageList, deleteDict, createDict, updateDict } from "@/api/system/dict";
import Pagination from "@/components/Pagination"; // el分页
import DialogDict from "@/components/System/dict/dialogDict.vue";
import DialogDictItemIndex from "@/components/System/dict/dialogDictItemIndex.vue";

export default {
  data() {
    return {
      //表格数据
      tableData: [],
      typeKey: "",
      systemKey: "",
      //条件查询搜索
      total: 0,
      listQuery: {
        current: 1,
        size: 10,
        type: undefined,
        system: undefined,
      },
      formData: {},
      dictIdData: {},
      options: [
        {
          value: "1",
          label: "系统类",
        },
        {
          value: "0",
          label: "业务类",
        },
      ],
      dialogDict: {
        show: false,
      },
      dialogDictItemIndex: {
        show: false,
      },
    };
  },
  methods: {
    getList() {
      getDictPageList(this.listQuery).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.listQuery.current = res.data.current;
        this.listQuery.size = res.data.size;

        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    // 新增按钮触发
    showAddDialog() {
      this.dialogDict = {
        show: true,
        title: "新增字典",
        option: "add",
      };
      this.formData = {
      };
    },
    // 编辑按钮触发
    showEditDialog(row) {
      this.dialogDict = {
        show: true,
        title: "修改字典",
        option: "edit",
      };
      this.formData = {
        //operation为2表示修改
        operation: 2,
        id: row.id,
        type: row.type,
        system: row.system,
        remarks: row.remarks,
        description: row.description,
        createTime: row.createTime,
      };
    },
    //新增提交
    handleSubmit() {
      createDict(this.formData).then((res) => {
        if (res.data == true) {
          this.dialogDict.show = false;
          this.$message.success("新增成功！");
          this.getList();
        } else {
          this.dialogDict.show = false;
          this.$message.success(res.message);
        }
      });
    },
    //修改提交
    handleSubmitEdit() {
      updateDict(this.formData).then((res) => {
        if (res.data == true) {
          this.dialogDict.show = false;
          this.$message.success("修改成功！");
          this.getList();
        } else {
          this.dialogDict.show = false;
          this.$message.success(res.message);
        }
      });
    },
    //删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除数据类型为"' + row.type + '"', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDict(row.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    searchFilter() {
      if (this.typeKey != "") {
        this.listQuery.type = this.typeKey;
      }
      if (this.systemKey != "") {
        this.listQuery.system = this.systemKey;
      }
      this.getList();
    },
    //字典项显示
    handleView(row) {
      this.dialogDictItemIndex = {
        show: true,
        title: "字典项"
      },
      this.dictIdData = {
        dictId: row.id,
        type: row.type,
      };
    },
  },
  mounted() {
    this.getList();
  },
  components: {
    Pagination,
    DialogDict,
    DialogDictItemIndex,
  },
};
</script>

<style lang="scss" scoped>
// // 工具栏
// .head {
//   &-container {
//     text-indent: -10px;
//     > div {
//       display: flex;
//       align-items: center;
//       justify-content: space-between;
//       > span {
//         display: flex;
//         align-items: center;
//       }
//       .filter {
//         &-item {
//           margin-left: 10px;
//         }
//       }
//     }
//   }
// }
</style>